<template>
  <view v-if="shenheStatus == 0" class="pages">
    <view class="m-box">
      <view class="tit">新增绑定</view>
      <view class="inp">
        <input v-model="wx_username" placeholder="请输入微信号" />
      </view>
      <view class="btn" @click="handle('submit')">提交</view>
      <view class="img" v-if="ewm">
        <image
          @click="handle('see')"
          class="ewm"
          :src="ewm"
          mode="widthFix"
          show-menu-by-longpress
        ></image>
        <view class="ts">保存二维码图片，识别二维码绑定分享员</view>

        <view class="btn" @click="handle('saveImg')">保存图片</view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { bindSharer } from "@/api/videoShop";

export default {
  components: { Shenhe },

  data() {
    return {
      product_id: "",
      wx_username: "",
      sharer_id: "",

      ewm: ""
    };
  },

  async onLoad(opi) {
    if (opi.product_id) {
      this.product_id = opi.product_id;
    } else if (opi.sharer_id) {
      this.sharer_id = opi.sharer_id;
      this.wx_username = opi.wx_username;
    }
  },

  methods: {
    async bind() {
      let { product_id, wx_username, sharer_id } = this;
      if (!wx_username) return this.$utils.toast("请填写微信号");

      const params = {
        wx_username
      };
      if (sharer_id) {
        params.sharer_id = sharer_id;
      } else {
        params.product_id = product_id;
      }

      const res = await bindSharer(params, true);

      if (!res.code) {
        this.ewm = res.data.invite_image;
      }
    },

    saveImg() {
      uni.downloadFile({
        url: this.ewm, //图片地址
        success: (res) => {
          if (res.statusCode === 200) {
            this.$utils.saveImg(res.tempFilePath);
          }
        },
        fail: () => {
          uni.showToast({
            title: "保存失败，请检查是否开启权限",
            icon: "none"
          });
        }
      });
    },

    handle(type) {
      this.$u.throttle(() => {
        switch (type) {
          case "submit":
            this.bind();
            break;

          case "see":
            uni.previewImage({
              current: this.ewm,
              urls: [this.ewm]
            });
            break;

          case "saveImg":
            this.saveImg();
            break;

          default:
            break;
        }
      }, 500);
    }
  }
};
</script>

<style lang="scss" scoped>
.pages {
  min-height: 100vh;
  background: #f2f2f2;
  padding: 24rpx;
}

.m-box {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx;
}

.tit {
  font-weight: bold;
  font-size: 34rpx;
  color: #222;
}

.inp {
  input {
    height: 100rpx;
    width: 100%;
    box-sizing: border-box;
    font-size: 32rpx;
  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76rpx;
  background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
  border-radius: 32px;
  color: #fff;
  font-size: 30rpx;
}

.ewm {
  display: block;
  width: 100%;
}

.ts {
  padding: 40rpx 0 80rpx;
  color: #8c8c8c;
  font-size: 28rpx;
  text-align: center;
}

.img{
  padding-top: 40rpx;
}
</style>
